import {
  ForwardedRef,
  forwardRef,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from "react";
import { ComponentBaseProps } from "../../common-component/CommonTypes";
import "./IotTempHumComponent.less";

import img1 from "./images/temp.svg";
import img2 from "./images/hum.svg";
import img3 from "./images/temp-hum.png";
import { Tooltip } from "tdesign-react";
import { IotDeviceData } from "_common/DataType";
import { ViewerState } from "components";

export interface IotTempHumComponentStyle {
  color?: string;
  fontSize?: number;
  fontWeight?: number;
  fontFamily?: string;
  alignItems?: string;
  justifyContent?: string;
  borderColor?: string;
  borderRadius?: number;
  backgroundColor?: string;
}

export interface DeviceProps {
  terminalId: string;
  deviceCode: string;
  position: string;
}

export interface IotTempHumComponentProps extends ComponentBaseProps {
  style?: IotTempHumComponentStyle;
  device?: DeviceProps;
  standardStore?: any;
}

export interface IotTempHumComponentRef {
  updateConfig: (newConfig: IotTempHumComponentProps) => void;
  setEventHandler: (eventMap: Record<string, Function>) => void;
  updateIotData?: (data: IotDeviceData) => void;
}

export const IotTempHumComponent = forwardRef(
  (
    props: IotTempHumComponentProps,
    ref: ForwardedRef<IotTempHumComponentRef>
  ) => {
    const [config, setConfig] = useState<IotTempHumComponentProps>({
      ...props,
    });
    const { style, device } = config;
    const eventHandlerMap = useRef<Record<string, Function>>({});
    // 标准数据：温湿度对应的数据：value1、value2、value3 => 温度、湿度、电池电压
    const [standardData, setStandardData] = useState<IotDeviceData>();

    useImperativeHandle(ref, () => ({
      updateConfig: (newConfig) => setConfig({ ...newConfig }),
      setEventHandler: (eventMap) => (eventHandlerMap.current = eventMap),
      updateIotData: (data) => {
        if (data.deviceCode == device?.deviceCode) {
          setStandardData(data);
        }
      },
    }));
    const tooltip = useMemo(() => {
      if (!device?.deviceCode)
        return <span className="text-red-500">未绑定设备</span>;
      return !device?.position
        ? `${device?.deviceCode}`
        : `${device?.deviceCode}-${device?.position}`;
    }, [device, device?.deviceCode, device?.position]);
    return (
      <div
        className="temp-hum-component cursor-pointer"
        style={{
          borderWidth: 1,
          borderStyle: "solid",
          borderColor: style?.borderColor,
          borderRadius: style?.borderRadius,
          backgroundColor: style?.backgroundColor,
        }}
        onClick={() => {
          ViewerState.handleClick(device?.deviceCode);
        }}
      >
        <Tooltip content={tooltip}>
          <div className="left-img">
            <img src={img3} style={{ width: 50, height: 30 }} />
            <span className="text-cyan-500">温湿度</span>
          </div>
        </Tooltip>

        <div className="right-content">
          <div className="content">
            <Tooltip content="温度">
              <img src={img1} style={{ width: 15, height: 15 }} />
            </Tooltip>
            <span
              className="value"
              style={{
                fontSize: style?.fontSize,
                color: style?.color,
                fontWeight: style?.fontWeight,
              }}
            >
              {standardData?.value1?.toFixed(1) ?? "--"} ℃
            </span>
          </div>
          <div className="content">
            <Tooltip content="湿度">
              <img src={img2} style={{ width: 15, height: 15 }} />
            </Tooltip>
            <span
              className="value"
              style={{
                fontSize: style?.fontSize,
                color: style?.color,
                fontWeight: style?.fontWeight,
              }}
            >
              {standardData?.value2?.toFixed(1) ?? "--"} %
            </span>
          </div>
        </div>
      </div>
    );
  }
);

export default IotTempHumComponent;
